<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>店铺申请 - 巷陌发现</title>
  <link rel="stylesheet" href="../static/bootstrap-icons/font/bootstrap-icons.css">

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
      padding: 20px;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eaeaea;
    }

    .page-title {
      font-size: 28px;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .page-title i {
      color: #6a11cb;
    }

    .back-btn {
      background-color: #6c757d;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.3s;
      font-size: 14px;
    }

    .back-btn:hover {
      background-color: #5a6268;
    }

    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      overflow: hidden;
    }

    .card-header {
      padding: 20px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #eaeaea;
    }

    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-body {
      padding: 25px;
    }

    .form-section {
      margin-bottom: 30px;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title i {
      color: #6a11cb;
      background: rgba(106, 17, 203, 0.1);
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    .form-label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #333;
    }

    .form-control {
      width: 100%;
      padding: 12px;
      border: 1px solid #eaeaea;
      border-radius: 6px;
      font-size: 14px;
      font-family: inherit;
      transition: all 0.3s;
    }

    .form-control:focus {
      border-color: #6a11cb;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
    }

    textarea.form-control {
      min-height: 100px;
      resize: vertical;
    }

    select.form-control {
      cursor: pointer;
    }

    .form-hint {
      font-size: 12px;
      color: #6c757d;
      margin-top: 5px;
    }

    .required::after {
      content: " *";
      color: #dc3545;
    }

    /* 店铺头像区域 */
    .shop-avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }

    .shop-avatar-large {
      width: 150px;
      height: 150px;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 10px;
      border: 4px solid #f0f4f8;
      position: relative;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }

    .shop-avatar-large img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .avatar-upload-btn {
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .shop-avatar-large:hover .avatar-upload-btn {
      opacity: 1;
    }

    /* 图片上传区域 */
    .images-upload-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .images-upload-area {
      border: 2px dashed #ced4da;
      border-radius: 8px;
      padding: 30px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .images-upload-area:hover {
      border-color: #6a11cb;
      background-color: #f8f9fa;
    }

    .images-upload-icon {
      font-size: 48px;
      color: #6c757d;
      margin-bottom: 15px;
    }

    .images-upload-text {
      color: #6c757d;
      margin-bottom: 15px;
    }

    .images-upload-btn {
      background-color: #6a11cb;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
    }

    .images-upload-btn:hover {
      background-color: #5a0dc8;
    }

    .images-preview {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      margin-top: 20px;
    }

    .image-preview-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      aspect-ratio: 1;
    }

    .image-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-remove-btn {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: rgba(220, 53, 69, 0.9);
      color: white;
      border: none;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
    }

    /* 操作按钮 */
    .action-buttons {
      display: flex;
      gap: 15px;
      justify-content: flex-end;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #eaeaea;
    }

    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
    }

    .btn-primary {
      background-color: #6a11cb;
      color: white;
    }

    .btn-primary:hover {
      background-color: #5a0dc8;
    }

    .btn-secondary {
      background-color: #6c757d;
      color: white;
    }

    .btn-secondary:hover {
      background-color: #5a6268;
    }

    /* 模态框样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-content {
      background-color: white;
      border-radius: 8px;
      width: 90%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .modal-header {
      padding: 20px;
      border-bottom: 1px solid #eaeaea;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-title {
      font-size: 20px;
      font-weight: 600;
    }

    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #666;
    }

    .modal-body {
      padding: 20px;
    }

    .success-icon {
      font-size: 60px;
      color: #28a745;
      text-align: center;
      margin-bottom: 20px;
    }

    .success-message {
      text-align: center;
      margin-bottom: 20px;
    }

    .modal-footer {
      padding: 20px;
      border-top: 1px solid #eaeaea;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .form-grid {
        grid-template-columns: 1fr;
      }

      .action-buttons {
        flex-direction: column;
      }

      .btn {
        width: 100%;
        justify-content: center;
      }

      .images-preview {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      }
    }
    .file-preview-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 15px;
    }

    .file-preview-item {
      position: relative;
      width: 150px;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px;
      background: #f9f9f9;
    }

    .file-preview-content {
      text-align: center;
    }

    .file-preview-content img {
      max-width: 100%;
      max-height: 120px;
      border-radius: 4px;
    }

    .document-preview {
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f0f0;
      border-radius: 4px;
      margin-bottom: 8px;
    }

    .document-icon {
      font-size: 48px;
      color: #666;
    }

    .bi-file-pdf {
      color: #e74c3c;
    }

    .bi-file-word {
      color: #2b579a;
    }

    .file-info {
      margin-top: 8px;
    }

    .file-name {
      display: block;
      font-size: 12px;
      font-weight: bold;
      word-break: break-all;
    }

    .file-type, .file-size {
      display: block;
      font-size: 11px;
      color: #666;
      margin-top: 2px;
    }

    .file-remove-btn {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      border: none;
      border-radius: 50%;
      background: #ff4757;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .file-remove-btn:hover {
      background: #ff3742;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="page-header">
    <h1 class="page-title">
      <i class="bi bi-shop"></i> 店铺申请
    </h1>
    <button class="back-btn" onclick="window.history.back()">
      <i class="bi bi-arrow-left"></i> 返回
    </button>
  </div>

  <div class="card">
    <div class="card-header">
      <h2 class="card-title">
        <i class="bi bi-file-text"></i> 店铺信息填写
      </h2>
    </div>
    <div class="card-body">
      <form id="shopApplicationForm">
        <!-- 店铺基本信息 -->
        <div class="form-section">
          <h3 class="section-title">
            <i class="bi bi-info-circle"></i> 基本信息
          </h3>

          <div class="shop-avatar-section">
            <div class="shop-avatar-large">
              <img src="" alt="店铺头像" id="shopAvatar">
              <button type="button" class="avatar-upload-btn">
                <i class="bi bi-camera"></i> 更换头像
              </button>
              <input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="handleAvatarUpload(event)">
            </div>
            <div class="form-hint">建议上传正方形图片，大小不超过2MB</div>
          </div>

          <div class="form-grid">
            <div class="form-group">
              <label class="form-label required" for="shopName">店铺名称</label>
              <input type="text" class="form-control" id="shopName" name="shopName" placeholder="请输入店铺名称" required>
            </div>

            <div class="form-group">
              <label class="form-label required" for="shopCategory">店铺分类</label>
              <select class="form-control" id="shopCategory" name="shopCategory" required>
                <option value="">请选择分类</option>
                <option value="restaurant">餐厅</option>
                <option value="cafe">咖啡厅</option>
                <option value="bar">酒吧</option>
                <option value="dessert">甜品店</option>
                <option value="snack">小吃店</option>
                <option value="other">其他</option>
              </select>
            </div>

            <div class="form-group">
              <label class="form-label required" for="ownerName">店主姓名</label>
              <input type="text" class="form-control" id="ownerName" name="ownerName" placeholder="请输入店主真实姓名" required>
            </div>

            <div class="form-group">
              <label class="form-label required" for="phone">联系电话</label>
              <input type="tel" class="form-control" id="phone" name="phone" placeholder="请输入联系电话" required>
            </div>

            <div class="form-group full-width">
              <label class="form-label required" for="shopDescription">店铺简介</label>
              <textarea class="form-control" id="shopDescription" name="shopDescription" placeholder="请简要介绍您的店铺特色、主打产品等..." required></textarea>
              <div class="form-hint">请用简洁的语言描述您的店铺，吸引更多顾客</div>
            </div>

            <div class="form-group full-width">
              <label class="form-label required" for="shopAddress">详细地址</label>
              <input type="text" class="form-control" id="shopAddress" name="shopAddress" placeholder="请输入店铺详细地址" required>
            </div>

            <div class="form-group">
              <label class="form-label required" for="businessHours">营业时间</label>
              <input type="text" class="form-control" id="businessHours" name="businessHours" placeholder="例如：09:00-22:00" required>
            </div>

            <div class="form-group">
              <label class="form-label" for="averagePrice">人均消费</label>
              <input type="text" class="form-control" id="averagePrice" name="averagePrice" placeholder="例如：¥50-100">
            </div>
          </div>
        </div>

        <!-- 店铺图片上传 -->
        <div class="form-section">
          <h3 class="section-title">
            <i class="bi bi-images"></i> 店铺图片
          </h3>

          <div class="images-upload-container">
            <div class="images-upload-area">
              <div class="images-upload-icon">
                <i class="bi bi-cloud-arrow-up"></i>
              </div>
              <div class="images-upload-text">点击上传店铺环境、菜品等图片</div>
              <button type="button" class="images-upload-btn">选择图片</button>
              <input type="file" id="shopImagesInput" accept="image/*" multiple style="display: none;" onchange="handleShopImagesUpload(event)">
            </div>
            <div class="form-hint">最多可上传10张图片，每张图片不超过5MB，支持JPG、PNG格式</div>

            <div class="images-preview" id="shopImagesPreview"></div>
          </div>
        </div>

        <!-- 营业执照上传 -->
        <div class="form-section">
          <h3 class="section-title">
            <i class="bi bi-file-earmark-check"></i> 资质证明
          </h3>

          <div class="form-grid">
            <div class="form-group">
              <label class="form-label required" for="businessLicense">营业执照</label>
              <input type="file" class="form-control" id="businessLicense" name="businessLicense" accept="image/*" required onchange="handleLicensePreview(event, 'licensePreview')">
              <div class="form-hint">请上传清晰的营业执照照片</div>
              <div class="image-preview-item" id="licensePreview" style="display: none; margin-top: 10px;">
                <img src="" alt="营业执照预览">
                <button type="button" class="image-remove-btn" onclick="removeLicensePreview()">
                  <i class="bi bi-x"></i>
                </button>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label" for="otherCertificates">其他证书</label>
              <input type="file" class="form-control" id="otherCertificates" name="otherCertificates" accept="image/*" multiple onchange="handleCertificatesUpload(event)">
              <div class="form-hint">可上传卫生许可证、食品经营许可证等（可选）</div>
              <div class="images-preview" id="certificatesPreview"></div>
            </div>
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="action-buttons">
          <button type="button" class="btn btn-secondary" onclick="window.history.back()">
            <i class="bi bi-arrow-left"></i> 取消
          </button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-send"></i> 提交申请
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 提交成功模态框 -->
<div class="modal-overlay" id="successModal" style="display: none;">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title">申请提交成功</h3>
      <button class="modal-close" onclick="closeSuccessModal()">&times;</button>
    </div>
    <div class="modal-body">
      <div class="success-icon">
        <i class="bi bi-check-circle"></i>
      </div>
      <div class="success-message">
        <p>您的店铺申请已成功提交！</p>
        <p>我们将在3-5个工作日内完成审核，审核结果将通过短信和站内通知您。</p>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" onclick="closeSuccessModal()">确定</button>
    </div>
  </div>
</div>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/jquery.cookie.js"></script>
<script src="../static/js/ShopAduitApplication.js"></script>
</body>
</html>